<template>
  <div id="gdqushi" :style="{width:'100%',height:'100%',backgroundColor:'#fff'}"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.chartsData
    var myChart = echarts.init(document.getElementById('gdqushi'))
    const option = {
      title: {
        text: '近30天工单故障、工单完成趋势',
        left: '18px',
        top: '16',
        textStyle: {
          color: '#222',
          fontSize: 12,
          fontWeight: '600',
        },
      },
      color: ['#6DD388', '#F68A8A'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      grid: {
        left: '25',
        right: '25',
        bottom: '20',
        top: '20%',
        containLabel: true,
      },
      legend: {
        data: ['工单完成', '工单故障'],
        orient: 'horizontal',
        // icon: 'arrow',
        show: true,
        right: 20,
        top: 40,
      },
      xAxis: {
        type: 'category',
        data: echartData.gdyueshijian,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        // max: max_value>=100? max_value + 100: max_value+10,
        // max: max_value > 100 ? max_value * 2 : max_value + 10,
        // interval: 10,
        // nameLocation: "center",
        axisLabel: {
          color: '#999',
          textStyle: {
            fontSize: 12,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F3F4F4',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          name: '工单完成',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          data: echartData.Thirtywc,
        },
        {
          name: '工单故障',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          data: echartData.Thirtygz,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
